import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="For Designers/Intro" />


# Designer’s Introduction to Radial

New York Public Radio’s Radial Design System is a user-focused, teamwork-oriented framework. Across touchpoints, this is the guiding light in helping our org stay consistent and build future-proof products. The following guidelines below are to help orient designers new to building NYPR products.

  

## Guiding Principles

Start off by familiarizing yourself with the Radial Foundations, along with its atomic and molecular structure. Radial was built to help NYPR build beautiful and accessible sites rapidly using reusable components.

  

[Read Our Principles](https://docs.google.com/document/d/1dwYRObMVdD9I-Mt1VJDZXheDNwFPTOHK4CZxzRa58ik/edit?pli=1#)

[Read more about Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)

  

## Atomic Design Principles

Definitions of Atomic Design structure provided by Brad Frost

  
|  |  |
|--|--|
| <img alt="List" src="./images/AtomicDesign-atom.jpg" width="100" /> | **Atom:** “Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.” |
| <img alt="List" src="./images/AtomicDesign-molecule.jpg" width="100" /> | **Molecule:** “Groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.” |
| <img alt="List" src="./images/AtomicDesign-organism.jpg" width="100" /> | **Organism:** “...groups of molecules joined together to form a relatively complex, distinct section of an interface.” |
| <img alt="List" src="./images/AtomicDesign-atom.jpg" width="100" /> | **Templates:** “...consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.” |
| <img alt="List" src="./images/AtomicDesign-page.jpg" width="100" /> | **Pages:** “...specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.” |

## Governance / How to Contribute

In designing scalable, cross-brand components built in the whitelabel, it allows us to test and validate designs before we launch them on brand. We may also work on brand-specific components, then contribute them back to the whitelabel for broader use. 


Our goal is to have elements in both white label and brand specific libraries. All newly added atoms, molecules, organisms or templates added to this library should be usable across more than one of our brands. This library exists only as a shared representation of patterns that are used throughout more than one brand.

  

Newly proposed components or templates should be run by the core Design Systems group (Product, Development, and Design) before adding to this library.

  

## Libraries

We house our Radial building blocks as Figma libraries, which we use to build our designs. Figma libraries consist of common grids, fonts, colors, and other patterns.

  

[Figma Libraries FAQ](https://help.figma.com/hc/en-us/articles/360041051154)

  

### Whitelabel

This is the latest library and should be used for all standard components. All new library items should be added here. Eventually this will be the only library needed to build experiences across all of our brands, however we’re still in the process of consolidating older libraries into this document. [View the Figma Whitelabel Library](https://www.figma.com/file/6mNJjcAldqrElBDDFTR8ui/Whitelabel-In-Progress-MASTER?node-id=0%3A1)